<template>
	<view class="wrap">
		<view style="position: fixed;z-index: 200;bottom: 250rpx;right: 120rpx;">
			<u-icon name="plus-circle-fill" color="#15b1ff" size="150" @click="addSubject()"></u-icon>
		</view>
		<view style="position: fixed;z-index: 200;bottom: 150rpx;right: 150rpx;">
			<u-icon name="plus-circle-fill" color="#f9ae3d" size="90" @click="openTempShow()"></u-icon>
		</view>
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view v-if="current === 0">
		</view>
		<scroll-view class="scroll-list msg-list-item" scroll-y="true">
			<u-card class="task-list-item" v-for="(item,index) in subjectList" v-bind:key="index" :border="false" padding="20" margin="10rpx 20rpx">
				<view slot="head" style="display: flex;align-items: center;justify-content: space-between;"  @click="toEdit(item.subjectId)">
					<view class="apply-text" style="display: flex;"><view style="width: 10rpx;background-color: #3c9cff;height: 25rpx;border-radius: 5rpx;margin-right: 8rpx;margin-top: 8rpx"></view >
					<view style="color: #3c9cff;font-weight: bold;">{{item.subjectName}}</view></view>
					<view style="color: #999999;font-size: 22rpx;">{{computeRate(item.taskList)}}</view>
				</view>
				<view class="" slot="body"  @click="navTo('/pages/sys/project/list-item?id='+item.subjectId)">
					<u-row gutter="16">
						<u-row gutter="16">
							<view  style="color: gray;display:flex">
							<span style="margin-top: 20rpx;">时间：</span>
							<span style="margin-top: 20rpx;">{{item.fireDate}}</span>
							<u-divider text="分割线" style="width: 20%;" lineColor="#15b1ff">
								{{computeStrDate(item.fireDate,item.demandDate)}}
							</u-divider>
							<span style="margin-top: 20rpx;">{{item.demandDate}}</span>
							<span v-if="current === 0" style="margin-left: 20rpx;margin-top: 15rpx;" 
							:class="computeNewDate(item.demandDate)>3?
							'green-text':computeNewDate(item.demandDate)>=0?'yellow-text':'red-text'">
							<span v-if="computeNewDate(item.demandDate) >=0 ">剩余:</span>
							<span v-if="computeNewDate(item.demandDate) <0 ">逾期:</span>
							<span style="font-size: 30rpx;margin: 5rpx">{{computeNewDate(item.demandDate)>0?computeNewDate(item.demandDate):0-computeNewDate(item.demandDate)}}</span>
							天</span>
							</view>
						</u-row>
						<u-col span="12">
							<view class="apply-text"><span>描述：</span>
								<span style="font-size: 25rpx;">{{item.desp}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="apply-list-foot" slot="foot">
					<u-row gutter="16">
						<u-col span="12" >
							<span><u-tag shape="circle" size="mini" :text="ent.nickName" type="success" v-for="(ent,ind) in item.headUsers" v-bind:key="ind"> </u-tag></span>
							<span><u-tag shape="circle" size="mini" :text="ent.nickName"  v-for="(ent,ind) in item.copyUsers" v-bind:key="ind"> </u-tag></span>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<u-divider>已经到底了</u-divider>
		</scroll-view>
		<u-popup v-model="tempShow" border-radius="20" mode="bottom" height="1000rpx">
			<view style="margin: 20rpx;">
				<u-search placeholder="模板名称" focus v-model="serchVal" @search="tempSearch()" @change="tempSearch()" @custom="tempSearch"></u-search>
				<scroll-view scroll-y="true" style="height: 700rpx;">
					<view>
						<view v-for="(item,index) in tempList" :key="index">
							<u-cell-item icon="file-text" :title="item.subjectNo" @click="addTemp2Subject(index)"></u-cell-item>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		</view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
export default {
	data() {
		return {
			keywords: '',
			tempShow:false,
			list: [{
				name: '执行中'
			}, 
			{
				name: '新建',
			},
			 {
			 	name: '取消',
			 }, 
			 {
			 	name: '暂停',
			 }, 
			{
				name: '已完成',
			}],
			serchVal:'',
			current: 0,
			status: 'loadmore',
			iconType: 'circle',
			isDot: false,
			loadText: {
						loadmore: '点击加载更多',
						loading: '正在加载...',
						nomore: '没有更多了'
			},
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				subjectNo: undefined,
				subjectName: undefined,
				desp: undefined,
				status: '执行中',
			},
			tempList:[],
			subjectList:[]
						
		};
	},
	onLoad(option) {
		if (option.token) {
			uni.setStorageSync('token', option.token);
			// this.$u.toast(option.token);
		}
	},
	onShow() {
		this.search()
		this.tempSearch()
	},
	methods: {
		change(index) {
			this.current = index;
			this.queryParams.status = this.list[index].name
			this.search()
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		toEdit(subjectId ){
			uni.navigateTo({
				url: 'add-project?subjectId='+subjectId
			});
		},
		openTempShow(){
			this.tempShow = true
		},
		search(value) {
			// this.$u.toast('搜索内容为：' + value)
			this.queryParams.subjectName = value
			this.$u.api.listSubject(this.queryParams).then(res => {
				this.subjectList = res.rows
			})
		},
		tempSearch(){
			const query = {
				pageNum: 1,
				pageSize: 100,
				subjectNo:this.serchVal
			}
			this.$u.api.listTemp(query).then(res=>{
				this.tempList = res.rows
			})
		},
		canEdit(obj){
		  if(this.yUsername == 'admin'){
			return false;
		  }
		  return !(obj.createBy == this.yUsername || obj.headUser.indexOf(this.yUsername+',') > -1);
		},
		computeRate(taskList){
		  const total = taskList.length
		  const editing = taskList.filter(item =>item.status == '执行中').length
		  const finish = taskList.filter(item =>item.status == '已完成').length
		  return total+'/'+editing + '/' + finish
		},
		computeStrDate(str1,str2){
			return this.GetDate(str1,str2,'day')
		},
		computeNewDate(str1){
			return this.GetDate(this.$u.date(new Date(),'yyyy-mm-dd'),str1,'day')
		},
		GetDate(startTime, endTime, diffType) {
		    startTime = startTime.replace(/-/g, "/");
		    endTime = endTime.replace(/-/g, "/");
		    diffType = diffType.toLowerCase();
		    var sTime = new Date(startTime);      //开始时间
		    var eTime = new Date(endTime);  //结束时间
		    //作为除数的数字
		    var divNum = 1;
		    switch (diffType) {
		        case "second":
		            divNum = 1000;
		            break;
		        case "minute":
		            divNum = 1000 * 60;
		            break;
		        case "hour":
		            divNum = 1000 * 3600;
		            break;
		        case "day":
		            divNum = 1000 * 3600 * 24;
		            break;
		        default:
		            break;
		    }
		    return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(divNum));
		},
		addSubject(){
			uni.navigateTo({
				url:'add-project'
			})
		},
		addTemp2Subject(index){
			const temp = this.tempList[index]
			this.$u.api.generateByTemplate(temp.subjectId).then(res=>{
				if(res.code == 200){
					this.$u.toast('生成项目成功');
					this.tempShow = false;
					this.search();
				}else{
					 this.$u.toast(res.msg);
				}
			})
		}
	}
};

</script>
<style lang="scss">
@import '../../../common/uni.css';
page {
	background-color: #f5f5f5;
}
.wrap .search{
	background: #ffffff;
}
.u-dropdown {
		background: #ffffff;
}
.msg-time{
	font-size: 26rpx;
	padding: 5px 0;
	color: #999999;
	text-align: center;
}
.u-card__foot{
	.u-icon{
		margin-right: 10px;
	}
}
.apply-text{
	font-size: 28rpx;
	color: #333333;
	span{
		color: #999999;
	}
}
.user-images{
	width: 28px;
	height:28px;
	margin-right: 8px;
}
.apply-list-foot{
	font-size: 28rpx;
	justify-content: space-around;
}
.personnel-list{
	display: flex;
	align-items: center;
	flex-wrap:wrap;
	.personnel-user{
		position: relative;
		margin: 5px 9px 0;
	}
	.user-images{
		width: 32px;
		height:32px;
		margin-right:0;
		
	}
	.iconfont{
		position: absolute;
		top:-12px;
		right:-5px;
		color: #FE0100;
	}
}
.agree-text{
	color: #4094ff;
}
.refuse-text{
	color: #ff4400;
}
.green-text{
	color:#5ac725;
}
.red-text{
	color:#f56c6c;
}
.yellow-text{
	color:#f9ae3d;
}
</style>
